import styles from './button.module.scss'

/**
 * IconButton函数用于创建一个图标按钮。
 * @param {Object} props - 组件接收的属性对象。
 * @param {() => void} props.onClick - 点击按钮时的回调函数。
 * @param {JSX.Element} props.icon - 显示在按钮内的图标元素。
 * @param {string} props.className - 按钮的CSS类名。
 * @param {string} props.title - 按钮的标题，可用于无障碍访问。
 * @param {string} props.text - 按钮内显示的文本。
 * @param {string} props.backgroundColor - 按钮的背景颜色。
 * @returns 返回一个配置了样式和事件的button元素。
 */
export function IconButton(props: {
    onClick?: () => void;
    icon?: JSX.Element;
    className?: string;
    title?: string;
    text?: string;
    backgroundColor?: string;
}) {
    const {backgroundColor} = props;

    const buttonStyle = {
        backgroundColor: backgroundColor,
    };

    return (
        <button className={styles["icon-button"]} style={buttonStyle} onClick={props.onClick}>
            {props.icon && <div className={styles["icon-button-icon"]}>{props.icon}</div>}
            {props.text && <div className={styles["icon-button-text"]}>{props.text}</div>}
        </button>
    );
}